<template>
  <div>
    <p>click {{count}} times, count is {{oddOrEven}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      // 增加
      increment () {
        this.count++
      },
      // 减少
      decrement () {
        this.count--
      },
      // 如果是奇数增加
      incrementIfOdd () {
        if (this.count % 2 === 1) {
          this.increment()
        }
      },
      // 过一秒增加
      incrementAsync () {
        setTimeout(() => {
          this.increment()
        }, 1000)
      }
    },
    computed: {
      oddOrEven () {
        return this.count % 2 === 0 ? '偶数' : '奇数'
      }
    }
  }
</script>

<style>

</style>
